<template>
  <div id="menu">
    <div class="bgbox"></div>
    <div class="authorInfoBox">
      <div class="headImgbox">
        <img
          @click="imgClick"
          :src="
            $store.state.isLogin
              ? userInformation && userInformation.avatar_url
              : 'https://cdn.jsdelivr.net/gh/mizizi/image_hosting@master/miBlog/构造函数1.6fjolklcnps0.jpg'
          "
          alt=""
        />
      </div>
      <div class="btnBox">
        <van-button
          v-if="!$store.state.isLogin"
          size="mini"
          plain
          round
          type="default"
          @click="goLogin"
          >点击登录</van-button
        >
        <van-button
          v-else
          size="mini"
          plain
          round
          type="warning"
          @click="Logout"
          >退出登录</van-button
        >
      </div>
    </div>
    <div class="menuList">
      <ul>
        <li @click="goFirstPage">首页</li>
        <li>
          常用论坛
          <van-icon
            :name="isChoice ? 'arrow-down' : 'arrow'"
            @click="goForirenLink"
          />
          <transition>
            <div class="foreign" v-show="isChoice">
              <ul>
                <li><a href="https://juejin.cn/">掘金</a></li>
                <li>
                  <a href="https://www.csdn.net/?spm=1001.2100.3001.4476"
                    >CSDN</a
                  >
                </li>
              </ul>
            </div>
          </transition>
        </li>
      </ul>
    </div>
    <!-- 更换头像弹出框 -->
    <van-dialog
      v-model="isShowUplloadAvatar"
      close-on-popstate
      width="200px"
      title="修改头像"
      show-cancel-button
      @confirm="sureChange"
      class="uploadAvatar"
    >
      <div class="dialogBox">
        <change-user-avatar @changedAvatar="getNewAvatar" />
      </div>
    </van-dialog>
  </div>
</template>

<script>
import LocalCache from '../../utils/localCache'
import ChangeUserAvatar from '../../components/ChangeAvatar.vue'
import { mapState, mapActions } from 'vuex'
import { UserService } from '../../services'
export default {
  data() {
    return {
      isLogin: !!LocalCache.getLocalCache('miBlogToken'),
      isShowUplloadAvatar: false,
      newAvatar: undefined,
      isChoice: false
    }
  },
  components: {
    ChangeUserAvatar
  },
  methods: {
    ...mapActions('Home', ['getUserInformation']),
    goLogin() {
      this.$router.push('/login')
      this.$emit('closeMenu')
    },
    Logout() {
      LocalCache.removeLocalCache('miBlogToken')
      this.$store.commit('noLogin')
    },
    goFirstPage() {
      this.$router.push('/artlist/0')
    },
    imgClick() {
      this.isShowUplloadAvatar = true
    },
    getNewAvatar(file) {
      console.log(file)
      this.newAvatar = file
    },
    async sureChange() {
      const FD = new FormData()
      FD.append('avatar', this.newAvatar)
      await UserService.upLoadUserAvatar(FD)
      this.getUserInformation()
    },
    goForirenLink() {
      this.isChoice = !this.isChoice
    }
  },
  computed: {
    ...mapState('Home', ['userInformation'])
  }
}
</script>

<style scoped lang="less">
#menu {
  background-color: #131313;
  height: 100%;
  z-index: 100000;
}
.bgbox {
  height: 150px;
  width: 100%;
  background: url('https://ae01.alicdn.com/kf/U355daa29aa8445dbbf38964d87ae720bj.jpg')
    no-repeat center;
  background-size: cover;
}
.authorInfoBox {
  position: relative;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 110px;
  background-color: #1d1f20;
  border-radius: 10px;
  .headImgbox {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-color: #1d1f20;
    border: 2px solid #1d1f20;
    img {
      width: 100%;
      height: 100%;
      border-radius: 30px;
    }
  }
  .btnBox {
    text-align: center;
    padding-top: 40px;
  }
}
.menuList {
  height: 380px;
  background-color: #1d1f20;
  border-radius: 10px;
  margin: -44px 16px 16px;
  padding: 16px;
  ul {
    li {
      color: #f3f4f4;
      font-size: 14px;
      padding: 12px 0;
      margin-left: 36px;
    }
  }
}
.dialogBox {
  width: 80px;
  margin: 0 auto;
}
.foreign {
  margin-top: 15px;
}
/*v-enter 是进入之前，元素的起始状态*/
/*v-leave-to 离开之后动画的终止状态*/
.v-enter,
.v-leave-to {
  opacity: 0; /*透明度*/
  transform: translateX(150px);
}
/*入场(离场)动画的时间段   */
.v-enter-active,
.v-leave-active {
  transition: all 0.8s ease;
}
</style>
